<%--
  Created by IntelliJ IDEA.
  User: 懒瑶瑶
  Date: 2022/5/26
  Time: 20:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>历史值班安排表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
    <script>
        // var util;
        layui.use(['table','util','jquery','layer','form'],function () {
            var table = layui.table,util=layui.util,$=layui.jquery,layer=layui.layer,form=layui.form;
            form.verify({
                num_sz:[
                    /(^$)|^\d+$/,
                    '只能填写数字'
                ],
            });
            //    转载table
            var tabBoss = table.render({
                elem:'#tableData',//指定id选择器
                cols:[[
                    {field:'weekArrangeId',title:'编号',align:'center'},
                    {field:'weekArrangeName',title:'排班名称',align:'center'},
                    {field:'ranges',title:'排班要求',align:'center'},
                    {field:'week',title:'星期',align:'center'},
                    {field:'empName',title:'员工名称',align:'center'},
                    // {field:'orderId',title:'排序',align:'center'},
                    {field:'duty',title:'总值班',align:'center',templet:function (d) {
                        var zid=d.duty;//取出每一个数据
                        if(zid==1){
                            return '是'
                        }else if(zid==2){
                            return '否'
                        }
                    }},
                    {field:'startTime',title:'开始时间',align:'center'},
                    {field:'endTime',title:'结束时间',align:'center'},
                    // {toolbar:'#tools',title:'操作',width:150,align:'center',fixed:'right'}
                ]],
                url:'${pageContext.request.contextPath}/emp/ange',//请求路径
                method:'post',//请求方法
                page:true,//显示分页主键
                limits:[5,10,15,20,25,30],//切换每页行数
                limit:10,//默认的没页行数
                loading:true,//数据加载效果样式
            });

            //监听添加按钮
            $("#bantu").click(function () {
                layer.open({
                    type:2,
                    fix:false,
                    maxmin:true,
                    offset:'5px',
                    shadeClose:true,
                    shade:0.4,
                    area:['600px','520px'],
                    title:["统计图",'font-size:18px; color:orange;'],
                    content:'${pageContext.request.contextPath}/emp/toangeban'
                });

            });

            //监听form表单数据
            form.on('submit(search-btn)',function (d) {
                var weekArrangeId = $("#weekArrangeId").val();
                var weekArrangeName = $("#weekArrangeName").val();
                var week = $("#week").val();
                var empName = $("#empName").val();
                var duty = $("#duty").val();
                // alert(empId + empName);
                // if(weekArrangeId!=null && weekArrangeId!=""){
                    table.reload('tableData',{//指定条件重载table
                        page: {curr:1},
                        where:{ //条件
                            weekArrangeId:weekArrangeId,
                            weekArrangeName:weekArrangeName,
                            week:week,
                            empName:empName,
                            duty:duty,
                        }
                    });
                // }
            });
            //监听form表单提交  模糊查询  查看全部按钮
            form.on('submit(shuaxin-btn)',function (d) {
                location.reload("demo");//重新加载父页面表格
            });
        });
    </script>
</head>
<body><br/>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">历史值班记录</li>
        <li>统计图</li>
    </ul>
    <div class="layui-tab-content" style="height: 520px;">
        <div class="layui-tab-item layui-show">
            <div>
                <form class="layui-form" action="${pageContext.request.contextPath}">
                    <div class="layui-inline" style="font-weight:bold;font-size: 16px">编号：</div>
                    <div class="layui-inline" style="width: 60px">
                        <input type="text" name="weekArrangeId" id="weekArrangeId" class="layui-input"  lay-verify="num_sz"/><%--lay-verify="num_sz"--%>
                    </div>

                    <div class="layui-inline" style="font-weight:bold;font-size: 16px">排班名称：</div>
                    <div class="layui-inline" style="width: 130px">
                        <input type="text" name="weekArrangeName" id="weekArrangeName" class="layui-input"/>
                    </div>

                    <div class="layui-inline" style="font-weight:bold;font-size: 16px">星期：</div>
                    <div class="layui-inline" style="width: 100px">
                        <%--            <input type="text" name="depId" id="depId" class="layui-input"/>--%>
                        <div class="layui-input-inline">
                            <select name="week" id="week">
                                <option value="">请选择</option>
                                <option value="星期一">星期一</option>
                                <option value="星期二">星期二</option>
                                <option value="星期三">星期三</option>
                                <option value="星期四">星期四</option>
                                <option value="星期五">星期五</option>
                                <option value="星期六">星期六</option>
                                <option value="星期日">星期日</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="font-weight:bold;font-size: 16px">总值班：</div>
                    <div class="layui-inline" style="width: 90px">
                        <%--            <input type="text" name="depId" id="depId" class="layui-input"/>--%>
                        <div class="layui-input-inline">
                            <select name="duty" id="duty">
                                <option value="">请选择</option>
                                <option value="1">是</option>
                                <option value="2">否</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="font-weight:bold;font-size: 16px">员工名称：</div>
                    <div class="layui-inline" style="width: 110px">
                        <%--            <input type="text" name="depId" id="depId" class="layui-input"/>--%>
                        <div class="layui-input-inline">
                            <input type="text" name="empName" id="empName" class="layui-input"/>

                        </div>
                    </div>

                    <a class="layui-btn layui-btn-normal layui-icon layui-icon-search" lay-filter="search-btn" lay-submit lay-size="sm">搜索</a>
                    <a 	class="layui-btn layui-btn-warm layui-icon layui-icon-refresh" lay-filter="shuaxin-btn" lay-submit lay-size="sm">刷新</a>
<%--                    <a 	class="layui-btn layui-btn-danger" id="bantu" lay-filter="tuban-btn" lay-submit lay-size="sm">统计图</a>--%>
                </form>
                <table  class="layui-table" id="tableData" lay-filter="demo" lay-size="sm" style="font-weight:bold;"></table>
            </div>
        </div>
        <div class="layui-tab-item">
            <span style="font-size: 20px;color: #ee9900;margin-left: 100px">数量(次)</span>
            <div id="main" style="width:1000px;height:420px;"></div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        //echarts进行初始化
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: []
            },
            legend: {
                data:['数量(条)']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [],
                    color:['#ffaa33'],//设置图像颜色
                    type: 'bar'
                }
            ]
        });
        //使用jQuery中的$.get()获取data.json文件，使用done函数;
        //done(function(data))中data表示调用的函数返回的数据
        $.get('${pageContext.request.contextPath}/emp/countMap').done(function(data){
            myChart.setOption({

                xAxis:{
                    data:data.EmpName
                },

                series:{
                    name:"值班次数",
                    data:data.countNum,
                }
            });
        });
    });
</script>
</body>
</html>
